<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<image src="/static/my/收起箭头小.png" class="nav-icon"></image>
				</view>
				<text class="nav-title">团购优惠</text>
				<view class="nav-right">
					<image src="/static/my/示警.png" class="nav-icon"></image>
				</view>
			</view>
		</view>

		<!-- 团购列表 -->
		<view class="group-buy-list">
			<view 
				class="group-buy-item" 
				v-for="deal in groupBuyDeals" 
				:key="deal.id"
				@click="goToDetail(deal)"
			>
				<view class="deal-image-container">
					<image :src="deal.image" class="deal-image" mode="aspectFill"></image>
					<view class="deal-overlay">
						<text class="deal-title">{{ deal.title }}</text>
						<text class="deal-subtitle">{{ deal.subtitle }}</text>
						<view class="deal-arrow">
							<text class="arrow-text">></text>
						</view>
					</view>
				</view>
				<view class="deal-content">
					<text class="deal-description">{{ deal.description }}</text>
					<view class="deal-details">
						<text class="details-link">详情 ></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text class="load-more-text" @click="loadMore">加载更多</text>
		</view>

		<!-- 无更多数据 -->
		<view class="no-more" v-if="!hasMore && groupBuyDeals.length > 0">
			<text class="no-more-text">没有更多数据了</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 团购优惠数据
				groupBuyDeals: [
					{
						id: 1,
						title: '优惠券',
						subtitle: '免费发放活动进行中...',
						description: '汽车惠民活动走进群众生活',
						image: '/static/index/Snipaste_2025-09-05_20-48-05.jpg',
						originalPrice: 199,
						currentPrice: 99,
						startDate: '2023-3-10 08:00',
						endDate: '2023-3-18 23:59',
						contactPhone: '0379-66666666',
						notes: '暂无',
						company: '济源某某汽车行业',
						createTime: '2023/3/10 11:09',
						status: 'active'
					},
					{
						id: 2,
						title: '清凉一夏 与沃同享',
						subtitle: '沃尔沃东区夏日主题购车节',
						description: '汽车惠民活动走进企业合作',
						image: '/static/index/Snipaste_2025-09-05_20-48-16.jpg',
						originalPrice: 299,
						currentPrice: 199,
						startDate: '2023-3-15 08:00',
						endDate: '2023-3-25 23:59',
						contactPhone: '0379-88888888',
						notes: '限时优惠',
						company: '沃尔沃东区经销商',
						createTime: '2023/3/15 10:30',
						status: 'active'
					},
					{
						id: 3,
						title: '春季保养套餐',
						subtitle: '专业保养服务优惠活动',
						description: '汽车惠民活动走进社区服务',
						image: '/static/index/Snipaste_2025-09-03_22-46-30.jpg',
						originalPrice: 399,
						currentPrice: 299,
						startDate: '2023-3-20 08:00',
						endDate: '2023-3-30 23:59',
						contactPhone: '0379-77777777',
						notes: '包含机油更换',
						company: '易车修汽车维修服务中心',
						createTime: '2023/3/20 09:15',
						status: 'active'
					},
					{
						id: 4,
						title: '洗车美容套餐',
						subtitle: '专业洗车美容服务',
						description: '汽车惠民活动走进学校合作',
						image: '/static/index/Snipaste_2025-09-03_22-46-43.jpg',
						originalPrice: 149,
						currentPrice: 99,
						startDate: '2023-3-25 08:00',
						endDate: '2023-4-5 23:59',
						contactPhone: '0379-55555555',
						notes: '学生专享',
						company: '专业洗车美容中心',
						createTime: '2023/3/25 14:20',
						status: 'active'
					}
				],
				// 分页相关
				currentPage: 1,
				pageSize: 10,
				hasMore: true,
				loading: false
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 跳转到详情页
			goToDetail(deal) {
				console.log('跳转到详情页:', deal);
				uni.navigateTo({
					url: `/pages/other/group-buydeals/group-buydeals?id=${deal.id}`,
					success: () => {
						console.log('跳转成功');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// 加载更多数据
			loadMore() {
				if (this.loading || !this.hasMore) return;
				
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				});
				
				// 模拟API调用
				setTimeout(() => {
					// 这里后期会替换为真实的API调用
					// this.fetchGroupBuyDeals();
					
					uni.hideLoading();
					this.loading = false;
					
					// 模拟没有更多数据
					if (this.currentPage >= 2) {
						this.hasMore = false;
					} else {
						this.currentPage++;
					}
				}, 1000);
			},
			// 获取团购优惠列表数据（后期API调用）
			async fetchGroupBuyDeals() {
				try {
					// 这里后期会替换为真实的API调用
					// const response = await this.$api.getGroupBuyDeals({
					//     page: this.currentPage,
					//     pageSize: this.pageSize
					// });
					
					// 模拟数据
					const mockData = {
						list: [],
						total: 0,
						hasMore: false
					};
					
					if (this.currentPage === 1) {
						// 第一页直接使用初始数据
						this.groupBuyDeals = this.groupBuyDeals;
					} else {
						// 后续页面追加数据
						this.groupBuyDeals = [...this.groupBuyDeals, ...mockData.list];
					}
					
					this.hasMore = mockData.hasMore;
					
				} catch (error) {
					console.error('获取团购数据失败:', error);
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				}
			}
		},
		// 生命周期
		onLoad() {
			// 页面加载时获取数据
			this.fetchGroupBuyDeals();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.currentPage = 1;
			this.hasMore = true;
			this.fetchGroupBuyDeals().finally(() => {
				uni.stopPullDownRefresh();
			});
		},
		// 上拉加载更多
		onReachBottom() {
			this.loadMore();
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding-top: var(--status-bar-height);
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 30rpx;
	}

	.nav-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	/* 团购列表 */
	.group-buy-list {
		padding: 20rpx;
	}

	.group-buy-item {
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
	}

	.group-buy-item:active {
		transform: scale(0.98);
	}

	.deal-image-container {
		position: relative;
		width: 100%;
		height: 300rpx;
		overflow: hidden;
	}

	.deal-image {
		width: 100%;
		height: 100%;
	}

	.deal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40rpx;
	}

	.deal-title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		text-align: center;
		margin-bottom: 16rpx;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
	}

	.deal-subtitle {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		margin-bottom: 20rpx;
	}

	.deal-arrow {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow-text {
		font-size: 32rpx;
		color: white;
		font-weight: bold;
	}

	.deal-content {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.deal-description {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		line-height: 1.4;
	}

	.deal-details {
		margin-left: 20rpx;
	}

	.details-link {
		font-size: 24rpx;
		color: #666;
	}

	/* 加载更多 */
	.load-more {
		padding: 40rpx;
		text-align: center;
	}

	.load-more-text {
		font-size: 28rpx;
		color: #3183FB;
		padding: 20rpx 40rpx;
		border: 2rpx solid #3183FB;
		border-radius: 40rpx;
		display: inline-block;
	}

	/* 无更多数据 */
	.no-more {
		padding: 40rpx;
		text-align: center;
	}

	.no-more-text {
		font-size: 24rpx;
		color: #999;
	}
</style>
